<template>
  <div class="container">
    <h1 style="font-size: 48px">欢迎使用 VUEQUIZ 低代码问卷平台</h1>
    <div class="mt-30 mb-50">
      <el-button color="#64b687" size="large" class="mr-20" @click="router.push('/materials')">
        立即体验
      </el-button>
      <el-button
        color="#38485c"
        size="large "
        @click="handleClick('https://www.bilibili.com/video/BV1xfcMebEtN/')"
      >
        如何使用
      </el-button>
    </div>
    <Welcome />
    <p class="more">
      <span @click="handleClick('https://gitee.com/grx330/vue-quiz')">查看项目源码</span>
      <el-divider direction="vertical" />
      <span @click="handleClick('https://gitee.com/grx330')">了解更多项目</span>
    </p>
  </div>
</template>

<script setup lang="ts">
import Welcome from '@/components/Common/Welcome.vue';
import { useRouter } from 'vue-router';
const router = useRouter();

function handleClick(url: string) {
  window.open(url);
}
</script>

<style lang="scss" scoped>
.container {
  height: 85vh;
  margin: 100px 180px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.more {
  margin-top: auto;
  span {
    background: linear-gradient(to right, #64b687, #38485c) no-repeat;
    background-size: 0 2px;
    background-position: right bottom;
    transition: background-size 0.5s;
    cursor: pointer;
    &:hover {
      background-size: 100% 2px;
      background-position: left bottom;
    }
  }
}
</style>
